<template>
	<!-- 4.0， 展示菜单列表-->

    <el-container class="home">


		<el-button type="danger" @click="addbtn" round> 新增</el-button>
		<!--         -->
		<DialogBanner @myevent="getMenuFromChild" :dialogVisible="dialogVisible" :menuForm="menuForm"></DialogBanner>


	<DialogMenu></DialogMenu>
	<el-table
		:data="menuList"
		stripe
		:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
		row-key="id"
		style="width: 100%">
		<el-table-column
			prop="id"
			label="菜单编号"
			width="80"
			align="center">
		</el-table-column>
		<el-table-column
			prop="pid"
			label="上级编号"
			width="80"
			align="center">
		</el-table-column>
		<el-table-column
			prop="title"
			label="菜单名称">
		</el-table-column>
		<el-table-column
			prop="icon"
			label="菜单图标">
			<template v-slot="prop">
				<i :class="prop.row.icon"></i>
			</template>
		</el-table-column>
		<el-table-column
			prop="type"
			label="菜单类型">
			<template v-slot="prop">
				<div v-if="prop.row.type===1">目录</div>
				<div v-else>菜单</div>
			</template>
		</el-table-column>
		<el-table-column
			prop="url"
			label="访问路径">
		</el-table-column>
		<el-table-column
			prop="status"
			label="是否启用">
		</el-table-column>
		<el-table-column
			label="操作">
			<template v-slot='prop'>
				<el-button icon="el-icon-search" circle ></el-button>
				<el-button type="primary" icon="el-icon-edit" circle @click ="editbtn(prop.row)"  ></el-button>
				<el-button type="danger" icon="el-icon-delete" circle @click = "removebtn(prop.row.id)"></el-button>
			</template>
		</el-table-column>
	</el-table>
	</el-container>
	
</template>

<script>
// 4.0 添加菜单效果，引入依赖，添加vuex数据
import { mapState, mapActions } from "vuex"
import DialogMenu from "../components/DialogMenu"

export default {
	name: "Menu",
	data(){
		return{
			dialogVisible:{
				isShow:false
			},
			menuForm:{
               id:"",
               pid:"",
               title:"",
               icon:"",
               type:"",
               url:"",
               status:""
		   }
		}
	},
	created() {
		this.getMenuListActions(),
		this.getParentMenuListActions(),
		this.postMenuActions(),
		this.deleteMenuActions()

	},
	computed: {
		...mapState({
			menuList: state => state.menu.menulist,
			parentList:state=>state.menu.parentList
		})
	},

	methods: {
		getMenuFromChild(val){
          this.postMenuActions(val)
		},
		addbtn(){
			this.dialogVisible.isShow="true",
			this.menuForm={
               id:"",
               pid:"",
               title:"",
               icon:"",
               type:"",
               url:"",
               status:""
		   }

			
		},
		editbtn(){

		},
		remove(){

		},
		...mapActions('menu', ['getMenuListActions','getParentMenuListActions','postMenuActions',"deleteMenuActions"])
	},
	components:{
       DialogMenu
	}
}
</script>

<style scoped>
  .el-container{
    display: flex;
	flex-direction: column;
	text-align: left;

  }

  .el-table {
    background-color: #fff;

  }
</style>